
<template>
  <div :id="chartid"  :style="{ height: height, width: width }"></div>
</template>
<script>
// import echarts from "echarts";
export default {
   props: {
    chartid: {
      type: String,
      default: "dd1",
    },
    idName: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  name: "barCharts",
  data() {
    return {
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      console.log(document.getElementById(this.chartid))
      var barChart = this.$echarts.init(document.getElementById(this.chartid));
      barChart.setOption({
    title:this.chartData.title,
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    color: this.chartData.color,
    series: [
        {
            name: this.chartData.name,
            type: 'pie',
            radius: '50%',
            data: this.chartData.data,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
});

  window.addEventListener("resize",()=>{
	barChart.resize();
});
    },
  },
};
</script>

<style scoped>
</style>